<template>
    <div class="app-container">
        <!-- 頂部導航 -->
        <header-view />

        <div class="main-container">
            <!-- 左側菜單 -->
            <aside-menu />

            <!-- 右側內容區 -->
            <main class="main-content">
                <breadcrumb v-if="showBreadcrumb" />
                <router-view v-slot="{ Component, route }">
                    <transition :name="getTransitionName(route)" mode="out-in">
                        <component :is="Component" :key="route.path" />
                    </transition>
                </router-view>
            </main>
        </div>
    </div>
</template>

<script setup>
import HeaderView from "@/layouts/header/headerLayouts.vue"
import AsideMenu from "@/layouts/menu/menuLayouts.vue"
import Breadcrumb from '@/layouts/breadcrumb/breadcrumbLayouts.vue'
import { useRoute } from 'vue-router'
import { computed } from "vue"

const route = useRoute()
const showBreadcrumb = computed(() => !route.meta?.hideBreadcrumb)

// 根據路由決定使用哪種過渡動畫
const getTransitionName = (to) => {
    // 如果路由有指定動畫，使用指定的
    if (to.meta?.transition) {
        return to.meta.transition
    }

    // 默認動畫 (可以根據需要修改)
    return 'fade-slide'
}
</script>

<style scoped lang="less">
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.main-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.main-content {
    padding: 0.75rem 1rem;
    flex: 1;
    overflow-y: auto;
    background-color: #f5f7fa;
}

/* 淡入淡出動畫 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* 滑動動畫 */
.slide-enter-active {
    transition: all 0.3s ease-out;
}

.slide-leave-active {
    transition: all 0.3s ease-in;
}

.slide-enter-from {
    transform: translateX(30px);
    opacity: 0;
}

.slide-leave-to {
    transform: translateX(-30px);
    opacity: 0;
}

/* 組合動畫 (淡入淡出+滑動) */
.fade-slide-enter-active {
    transition: all 0.3s ease-out;
}

.fade-slide-leave-active {
    transition: all 0.3s ease-in;
}

.fade-slide-enter-from {
    transform: translateY(20px);
    opacity: 0;
}

.fade-slide-leave-to {
    transform: translateY(-20px);
    opacity: 0;
}

/* 縮放動畫 */
.zoom-enter-active,
.zoom-leave-active {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.zoom-enter-from,
.zoom-leave-to {
    transform: scale(0.95);
    opacity: 0;
}

/* 翻頁動畫 */
.flip-enter-active {
    animation: flip-in 0.4s ease-out;
}

.flip-leave-active {
    animation: flip-out 0.4s ease-in;
}

@keyframes flip-in {
    from {
        transform: rotateY(90deg);
        opacity: 0;
    }

    to {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

@keyframes flip-out {
    from {
        transform: rotateY(0deg);
        opacity: 1;
    }

    to {
        transform: rotateY(-90deg);
        opacity: 0;
    }
}

/* 彈性動畫 */
.bounce-enter-active {
    animation: bounce-in 0.5s;
}

.bounce-leave-active {
    animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
</style>